<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rain Animation</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="container">
    <div class="cloud"></div>
  </div>
  <script>
    function rain() {
      const cloud = document.querySelector('.cloud'),
            e = document.createElement('div'),
            left = Math.floor(Math.random() * 310),
            width =  Math.random() * 5,
            height = Math.random() * 50,
            duration = Math.random() * 0.5

      e.classList.add('drop')
      cloud.appendChild(e)  
      e.style.left = left + 'px'
      e.style.width =0.5 + width + 'px'
      e.style.height =0.5 + height + 'px'
      e.style.animationDuration = 1 + duration + 's'
      setTimeout(() => {
        cloud.removeChild(e)
      },2000)
    }

    setInterval(() => {
      rain()
    },20)
  </script>
</body>
</html>